import Link from 'next/link';
import type { Case } from '@/lib/api';

interface CaseListProps {
  cases: Case[];
}

export default function CaseList({ cases }: CaseListProps) {
  return (
    <div className="divide-y divide-gray-100">
      {cases.map(caseItem => (
        <div key={caseItem.id} className="p-4 sm:p-6 hover:bg-gray-50/70 transition-colors duration-200">
          {/* 移动端布局 */}
          <div className="block sm:hidden">
            {/* 标题 - 宽度拉满 */}
            <div className="flex items-start mb-3">
              <Link href={`/cases/detail/${caseItem.slug}`} className="font-bold text-lg !text-black hover:!text-gray-800 break-words flex-1">
                {caseItem.title}
              </Link>
              {caseItem.isTop && (
                <span className="ml-2 flex-shrink-0 mt-1 px-2 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full">置顶</span>
              )}
            </div>
            
            {/* 图片下方：左侧封面，右侧描述和作者 */}
            <div className="flex space-x-3">
              {caseItem.coverImage && (
                <div className="w-20 h-16 flex-shrink-0">
                  <img 
                    src={caseItem.coverImage} 
                    className="w-full h-full object-contain rounded" 
                    alt={caseItem.title} 
                  />
                </div>
              )}
              <div className="flex-grow flex flex-col min-w-0">
                <div className="flex-grow">
                  <p className="text-xs text-gray-500 line-clamp-2 break-words !mb-0">
                    {caseItem.summary || caseItem.content.replace(/<[^>]*>/g, '')}
                  </p>
                </div>
                <div className="text-sm text-gray-500 mt-2 flex items-center space-x-2 flex-wrap">
                  <span>{caseItem.author}</span>
                  {caseItem.category?.name && (
                    <>
                      <span>·</span>
                      <span>{caseItem.category.name}</span>
                    </>
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* 桌面端布局 - 保持原有样式 */}
          <div className="hidden sm:flex space-x-4">
            {caseItem.coverImage && (
              <div className="w-40 h-24 flex-shrink-0">
                <img 
                  src={caseItem.coverImage} 
                  className="w-full h-full object-contain rounded" 
                  alt={caseItem.title} 
                />
              </div>
            )}
            <div className="flex-grow flex flex-col min-w-0">
              <div className="flex items-start">
                <Link href={`/cases/detail/${caseItem.slug}`} className="font-bold text-lg !text-black hover:!text-gray-800 break-words">
                  {caseItem.title}
                </Link>
                {caseItem.isTop && (
                  <span className="ml-2 flex-shrink-0 mt-1 px-2 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full">置顶</span>
                )}
              </div>
              <div className="flex-grow mt-2">
                <p className="text-xs text-gray-500 line-clamp-2 break-words !mb-0">
                  {caseItem.summary || caseItem.content.replace(/<[^>]*>/g, '')}
                </p>
              </div>
              <div className="text-sm text-gray-500 mt-2 flex items-center space-x-2 flex-wrap">
                <span>{caseItem.author}</span>
                {caseItem.category?.name && (
                  <>
                    <span>·</span>
                    <span>{caseItem.category.name}</span>
                  </>
                )}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
} 